<template>
    <div class="">
        <el-card class="!border-none" shadow="never">
            <el-page-header content="订单详情" @back="$router.back()" />
        </el-card>

        <el-card class="flex-1 !border-none mt-4" shadow="never" v-if="formData.infoData.orderInfo">
            <template #header>
                <span>订单信息</span>
            </template>
            <div class="flex flex-wrap">
                <p class="p_text">订单号：{{ formData.infoData.orderInfo.order_code }}</p>
                <p class="p_text">实付金额：{{ formData.infoData.orderInfo.price }}</p>
                <p class="p_text">支付时间：{{ formData.infoData.orderInfo.pay_time }}</p>
                <p class="p_text">
                    <span>订单状态：</span>
                    <el-tag v-if="formData.infoData.orderInfo.status == 1">待支付</el-tag>
                    <el-tag type="success" v-else>支付成功</el-tag>
                </p>
            </div>
        </el-card>

        <el-card class="flex-1 !border-none mt-4" shadow="never">
            <template #header>
                <span>订单操作</span>
            </template>
            <div class="flex flex-wrap">
                <el-button type="success" @click="showDialog(2)"> 上传电子版 </el-button>
                <el-button type="primary" @click="showDialog(3)"> 证书发放 </el-button>
            </div>
        </el-card>

        <el-card class="flex-1 !border-none mt-4" shadow="never">
            <template #header>
                <span>用户信息</span>
            </template>
            <div class="flex flex-wrap">
                <div class="flex_box">
                    <div>微信信息：</div>
                    <div class="ml-4">
                        <el-image class="user_img" :src="formData.infoData.user.avatar"></el-image>
                        <p class="user_name">{{ formData.infoData.user.nickname }}</p>
                    </div>
                </div>
                <div class="flex_box">
                    <div>推荐人信息：</div>
                    <div class="ml-4">
                        <el-image
                            class="user_img"
                            :src="formData.infoData.user.puser_avatar"
                        ></el-image>
                        <p class="user_name">{{ formData.infoData.user.puser_nickname }}</p>
                    </div>
                </div>
                <div class="flex_box">
                    <div>电子证书：</div>
                    <div class="ml-4">
                        <el-image
                            style="width: 200px"
                            :src="formData.infoData.zs_urls"
                            :fit="contain"
                        ></el-image>
                    </div>
                </div>
                <div class="flex_box">
                    <div>报名信息：</div>
                    <div class="ml-4">
                        <p>姓名：{{ formData.infoData.name }}</p>
                        <p>性别：{{ formData.infoData.sex == 1 ? '男' : '女' }}</p>
                        <p>年龄：{{ formData.infoData.age }}</p>
                        <p>监护人姓名：{{ formData.infoData.guardian_name }}</p>
                        <p>监护人联系电话：{{ formData.infoData.guardian_phone }}</p>
                        <p>学校名称：{{ formData.infoData.school_name }}</p>
                    </div>
                </div>
            </div>
        </el-card>

        <el-card class="flex-1 !border-none mt-4" shadow="never">
            <template #header>
                <span>证书信息</span>
            </template>
            <div class="flex flex-wrap">
                <p class="p_text">证书名称：{{ formData.infoData.zsInfo.name }}</p>
                <p class="p_text">
                    证书类型：{{ formData.infoData.zsInfo.type == 1 ? '综合素质测评' : '白名单' }}
                </p>
                <p class="p_text">证书分类：{{ formData.infoData.zsInfo.t_id }}</p>
                <p class="p_text">证书单价：{{ formData.infoData.orderInfo.price }}</p>
            </div>
            <div class="flex_box mt-4">
                <p class="">证书视频：</p>
                <video
                    :src="formData.video"
                    :controls="true"
                    :autoplay="false"
                    style="width: 500px"
                ></video>
            </div>
        </el-card>

        <el-card class="flex-1 !border-none mt-4" shadow="never">
            <template #header>
                <span>收货信息</span>
            </template>
            <div class="flex flex-wrap">
                <p class="p_text">收货人姓名：{{ formData.infoData.address_info.name }}</p>
                <p class="p_text">联系电话：{{ formData.infoData.address_info.phone }}</p>
                <p class="p_text">
                    收货地址：
                    <span v-for="(item, index) in formData.address" :key="index">{{ item }}</span>
                </p>
                <p class="p_text">详细地址：{{ formData.infoData.address_info.address_info }}</p>
            </div>
        </el-card>

        <el-card class="flex-1 !border-none mt-4" shadow="never">
            <template #header>
                <span>提交记录</span>
            </template>
            <!-- <el-table size="large" :data="pager.lists">
        <el-table-column label="ID" prop="id" min-width="80" />
        <el-table-column label="用户信息" min-width="120">
          <template #default="{ row }">
            <div>{{ row.user.nickname }}</div>
            <el-image
              v-if="row.user.avatar"
              :src="row.user.avatar"
              style="width: 100px"
              fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column label="用户姓名" prop="name" min-width="80" />
        <el-table-column label="推荐人信息" min-width="120">
          <template #default="{ row }">
            <div>{{ row.user.puser_nickname }}</div>
            <el-image
              v-if="row.user.puser_avatar"
              :src="row.user.puser_avatar"
              style="width: 100px"
              fit="contain"
            />
          </template>
        </el-table-column>
        <el-table-column label="订单类型" min-width="80">
          <template #default="{ row }">
            <el-tag type="success" v-if="row.order_info">综合素质测评</el-tag>
            <el-tag v-else>白名单</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" min-width="80">
          <template #default="{ row }">
            <el-tag type="warning" v-if="row.status == 1">作业待上传</el-tag>
            <el-tag type="info" v-if="row.status == 2">待审核</el-tag>
            <el-tag type="success" v-if="row.status == 3">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否需要邮寄证书" prop="sort" min-width="120" />
        <el-table-column label="订单时间" prop="create_time" min-width="120" />
        <el-table-column label="操作" width="320" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="showDialog(1,row.id)">
              审核
            </el-button>
          </template>
        </el-table-column>
      </el-table> -->
        </el-card>

        <!-- 操作弹框 -->
        <el-dialog v-model="dialog" :title="formData.dialogTitle" width="35%">
            <!-- 审核 -->
            <div v-if="formData.dialogType == 1">
                <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules">
                    <el-form-item label="操作视频：">
                        <div style="width: 100%">
                            <video :src="formData.video" :controls="true" :autoplay="false"></video>
                        </div>
                    </el-form-item>
                    <el-form-item label="操作图片：">
                        <el-image
                            v-for="(item, index) in formData.imgs"
                            :key="index"
                            style="
                                width: 100px;
                                height: 100px;
                                margin-right: 10px;
                                border-radius: 6px;
                            "
                            :initial-index="index"
                            :src="item"
                            :preview-src-list="formData.imgs"
                        >
                        </el-image>
                    </el-form-item>
                    <el-form-item label="操作描述：">
                        <p>{{ formData.content }}</p>
                    </el-form-item>
                    <el-form-item label="审核：" prop="is_show" required>
                        <el-radio-group v-model="formData.status">
                            <el-radio :label="2">审核通过</el-radio>
                            <el-radio :label="3">审核驳回</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 上传电子版 -->
            <div v-if="formData.dialogType == 2">
                <el-upload
                    class="avatar-uploader"
                    ref="uploadRefs"
                    :on-change="onChange"
                    v-loading="loading"
                    :show-file-list="false"
                    :auto-upload="false"
                >
                    <div class="up-box" v-if="formData.certificate_url == ''">
                        <el-icon color="#606266" :size="20">
                            <Plus />
                        </el-icon>
                    </div>
                    <img v-else :src="formData.certificate_url" class="avatar" />
                </el-upload>
            </div>
            <!-- 证书发放 -->
            <div v-if="formData.dialogType == 3">
                <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules">
                    <el-form-item label="快递单号：" prop="logistics_code" required>
                        <el-input
                            v-model="formData.logistics_code"
                            placeholder="请输入快递单号"
                            clearable
                        />
                    </el-form-item>
                    <el-form-item label="快递公司：" prop="logistics_name" required>
                        <el-input
                            v-model="formData.logistics_name"
                            placeholder="请输入快递公司名称"
                            clearable
                        />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialog = false">取消</el-button>
                    <!-- 审核 -->
                    <el-button type="primary" @click="toExamine" v-if="formData.dialogType == 1"
                        >确定</el-button
                    >
                    <!-- 上传电子版 -->
                    <el-button
                        type="primary"
                        @click="electronicVersion"
                        v-if="formData.dialogType == 2"
                        >确定</el-button
                    >
                    <!-- 发放证书 -->
                    <el-button
                        type="primary"
                        @click="issuingCertificates"
                        v-if="formData.dialogType == 3"
                        >确定</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup name="articleLists">
import { orderDetail, uploadEV, examine, getExamine, grantCertificate } from '@/api/order'
import { fpFile } from '@/api/fpUpLoad'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'
const route = useRoute()
const router = useRouter()
const formData = reactive({
    id: route.query.id,
    infoData: {
        orderInfo: '',
        zsInfo: '',
        user: '',
        address_info: ''
    },
    video: '',
    address: [],

    // 弹框
    zs_id: '',
    dialogTitle: '',
    dialogType: '',

    // 电子证书
    certificate_url: '',
    certificate_path: '',

    // 发放证书
    logistics_code: '',
    logistics_name: ''
})

const loading = ref()
const formRef = shallowRef<FormInstance>()

// 弹框
const dialog = ref(false)
const formRules = {
    logistics_code: [
        {
            required: true,
            message: '请填写快递单号',
            trigger: ['blur', 'change']
        }
    ],
    logistics_name: [
        {
            required: true,
            message: '请填写快递公司',
            trigger: ['blur', 'change']
        }
    ]
}

// 展示弹框
const showDialog = async (type: number, id: number) => {
    const text = type == 1 ? '证书审核' : type == 2 ? '上传电子证书' : '证书发放'
    formData.dialogTitle = text
    formData.dialogType = type
    formData.zs_id = id
    if (type == 1) {
        examineData()
    }
    dialog.value = true
}

const listArr = ref([])
// 选择文件
const onChange = (file: any) => {
    //   console.log("文件信息:", file);
    listArr.value = []
    // 假设1024一片，可根据实际来进行，也可以调接口进行
    const count = Math.ceil(file.size / 1024 / 1024 / 5)
    // 拿文件后缀
    const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
    const chunkid = generateUUID()
    for (let i = 0; i < count; i++) {
        const item = new FormData()
        item.append('chunkindex', i) //当前是第几片
        item.append('chunkcount', count) //分片的总数量
        item.append('files', file.raw.slice(i * 1024 * 1024 * 5, (i + 1) * 1024 * 1024 * 5)) //文件流数据
        item.append('extension', suffix) //文件的后缀
        item.append('name', file.name) //文件名
        item.append('size', file.size) //文件大小
        item.append('mime', file.raw.type) //文件的mime类型
        item.append('chunkid', chunkid) //文件uid，选的每个文件不一样，做区分（不是每个分片的）
        item.append('key', 'iNWxBywRQMn3bXZ8E5OGszoAVIjL9P') //上传接口需要的key，不是固定写死的，根据后端修改调整
        listArr.value.push(item)
    }
    loading.value = true
    file_up()
}

const generateUUID = () => {
    let d = new Date().getTime()
    if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now()
    }
    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
        const r = (d + Math.random() * 16) % 16 | 0
        d = Math.floor(d / 16)
        return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
    })
    return uuid
}

// 走上传接口
const file_up = async () => {
    let video_index = 0
    for (const v of listArr.value) {
        video_index++
        const res = await fpFile(v)
        if (video_index == listArr.value.length) {
            formData.certificate_path = res.save_url
            formData.certificate_url = res.show_url
        }
    }
    loading.value = false
}

// 上传电子版证书
const electronicVersion = async () => {
    const data = await uploadEV({
        id: formData.id,
        zs_url: formData.certificate_path
    })
    loading.value = false
    dialog.value = false
    formData.certificate_path = ''
    formData.certificate_url = ''
    feedback.msgSuccess(data.msg)
    getInfo()
}

// 审核
const toExamine = async () => {
    await formRef.value?.validate()
    const data = await examine({
        id: formData.id,
        status: formData.status
    })
    dialog.value = false
    feedback.msgSuccess(data.msg)
    getInfo()
}

// 发放证书
const issuingCertificates = async () => {
    await formRef.value?.validate()
    const data = await grantCertificate({
        id: formData.id,
        logistics_name: formData.logistics_name,
        logistics_code: formData.logistics_code
    })
    dialog.value = false
    formData.logistics_name = ''
    formData.logistics_code = ''
    feedback.msgSuccess(data.msg)
    getInfo()
}

// 获取详情
const getInfo = async () => {
    const data = await orderDetail({
        apply_id: route.query.id
    })
    formData.infoData = data
    formData.address = data.address_info.address_name.split(',')
    examineData()
}

// 获取证书的视频
const examineData = async () => {
    const data = await getExamine({
        apply_id: formData.id
    })
    formData.video = data.video_url
}

route.query.id && getInfo()
</script>
<style scoped>
.p_text {
    margin-right: 60px;
}

.flex_box {
    display: flex;
    align-items: center;
    margin-right: 80px;
}

.user_img {
    width: 80px;
    height: 80px;
    border-radius: 100px;
}

.user_name {
    font-size: 16px;
    text-align: center;
    margin-top: 5px;
}

.avatar {
    width: 100%;
    height: auto;
}

.up-box {
    width: 130px;
    height: 130px;
    border-radius: 6px;
    border: 1px dashed #c0c4cc;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>
